<template>
  <!-- 添加微信检测提示
  <div v-if="!isWechat" class="wechat-tip">
    <van-empty
      image="network"
      description="请在微信中打开访问"
    >
      <template #image>
        <img src="@/assets/images/wechat.jpeg" style="width: 160px;" />
      </template>
    </van-empty>
  </div>-->

  <!-- 将原有内容包裹在条件渲染中 -->
  <div class="index-container">
    <div class="banner-image">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" />
            </van-swipe-item>
        </van-swipe>
    </div>
    <div class="section-title">请选择大殿</div>
    <van-grid :border="false" :column-num="3" :clickable="true">
      <van-grid-item v-for="hall in templaHalls" :key="hall.id" :text="hall.name" @click="changeTempleHall(hall)">
        <van-image
          :src="hall.hallPicUrl"
        />
        <div class="title">{{ hall.name }}</div>
      </van-grid-item>
    </van-grid>
    <!-- 选择灯位 -->
    <div v-if="selectedTemple !== ''" class="lamp-position-map">
      <div class="section-title">选择灯位</div>
      <div class="lamp-map-container">
      <LampPositionMap3D
          ref="lampMapRef"
            :temple-id="selectedTemple"
          :rows="6"
          :columns="5"
            @select-lamp="handleLampSelect"
        />
    </div>

      <!-- 已选灯位信息展示 -->
      <div v-if="selectedLamp" class="selected-lamps-list" ref="selectedLampsRef">
        <div class="section-title">已选灯位</div>
        <div class="lamp-item">
          <div class="lamp-image">
            <van-image
              :src="lampIcon"
              width="120"
              height="120"
              radius="12"
            />
          </div>
          <div class="lamp-info">
            <div class="lamp-title">祈福莲花灯</div>
            <div class="lamp-position">
              <van-tag type="primary" round>
                {{selectedLamp.area}}区 第{{selectedLamp.row}}排 第{{selectedLamp.column}}列
              </van-tag>
            </div>
          </div>
          <div class="lamp-actions">
            <van-icon
              name="clear"
              class="delete-icon"
              @click="handleDeleteLamp(selectedLamp.id)"
            />
          </div>
        </div>
      </div>

      <!-- 已选灯位列表后添加以下内容 -->
      <div v-if="selectedLamp" class="setup-section">
        <!-- 灯类别选择 -->
        <div class="section-title">选择灯类别</div>
        <div class="lamp-types-grid">
          <div
            v-for="type in lampTypes"
            :key="type.id"
            class="lamp-type-item"
            :class="{ active: selectedLampType === type.id }"
            @click="selectLampType(type)"
          >
            <van-image :src="profileIcon" width="60" height="60" />
            <p>{{ type.typeName }}</p>
          </div>
        </div>

        <!-- 供灯时长选择 -->
        <div class="section-title">选择供灯时长</div>
        <div class="duration-options">
          <van-radio-group v-model="selectedDuration">
            <van-radio
              v-for="duration in durations"
              :key="duration.id"
              :name="duration.id"
              class="duration-radio"
              checked-color="#DF5454"
            >
              <div class="duration-card">
                <div class="duration-info">
                  <span class="duration-name">{{ duration.title }}</span>
                  <span class="duration-days">{{ duration.dayNum }}天</span>
                </div>
                <div class="duration-price">
                  <span class="price-symbol">¥</span>
                  <span class="price-value">{{ duration.price }}</span>
                </div>
              </div>
            </van-radio>
          </van-radio-group>
        </div>

        <!-- 总金额展示 -->
        <div class="total-amount">
          <span>总计金额：</span>
          <span class="amount">¥{{ totalAmount }}</span>
        </div>

        <!-- 祈福信息输入 -->
        <div class="blessing-input">
          <van-field
            v-model="prayerName"
            label="祈福人"
            placeholder="请输入姓名/合家/夫妻（不超过5字）"
            maxlength="5"
            show-word-limit
          />

          <van-field
            v-model="prayerMessage"
            label="祝愿语"
            type="textarea"
            placeholder="请输入或从下方选择祝愿语"
            rows="3"
            autosize
          />

          <!-- 预设祝愿语选择 -->
          <div class="preset-wishes">
            <van-tag
              v-for="wish in presetWishes"
              :key="wish.id"
              class="wish-tag"
              plain
              color="#F5A623"
              @click="selectWish(wish)"
            >
              {{ wish.blessWord }}
            </van-tag>
          </div>
        </div>

        <!-- 确认按钮 -->
        <div class="confirm-section">
          <van-button
            color="#DF5454"
            size="large"
            :disabled="!canConfirm"
            @click="handleConfirm"
          >
            确认供灯
          </van-button>
        </div>
      </div>
    </div>

    <tabbar></tabbar>
  </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted, nextTick, watch} from 'vue'
import tabbar from '@/components/tabbar/index.vue'
import LampPositionMap3D from '@/components/lamp/LampPositionMap3D.vue'
import {listTempleHall, listPriceUnit, listLampType, listBlessingWords, genPayParams} from "@/api/lotos-lamp.js";
import lampIcon from '@/assets/images/lamp-icon.png'
import profileIcon from '@/assets/images/profile-icon.png'
import {useUserStore} from "@/store/user.js";
import { useRouter } from 'vue-router'
import {checkUserAndAuth, handleToken, getThirdOpenid, handleThirdOpenid} from "@/utils/auth.js";  // 添加路由
import { showToast, showSuccessToast, showFailToast } from 'vant';

const router = useRouter()
const userStore = useUserStore()

// 使用 setup 语法糖时，导入的组件可以直接使用，无需注册
const selectedTemple = ref('')
const selectedTemplName = ref('')
const selectedPosition = ref(null)
const duration = ref('')
const prayerName = ref('')
const prayerMessage = ref('')
const areas = ref([])
const templaHalls = ref([])
// 新增已选灯位列表
const selectedLamp = ref(null)
const lampTypes = ref([])
const durations = ref([])
const presetWishes = ref([])

const themeVars = reactive({
  cardBackgroundColor: '#242832',
  cardBorderColor: '#333',
  cardDescColor: '#fff',
  // 添加按钮和表单相关的主题变量
  buttonNormalFontSize: '28px',
  buttonLargeHeight: '88px',
  buttonDefaultHeight: '88px',
  fieldLabelFontSize: '28px',
  fieldInputFontSize: '28px',
  cellFontSize: '28px',
  radioFontSize: '28px',
});

const images = [
      'https://ai-public.mastergo.com/ai/img_res/66ca0797faa20c4780df8328d74bc0f6.jpg',
      'https://ai-public.mastergo.com/ai/img_res/928ec770581c66e5fdeae966a6cc2a75.jpg',
      'https://ai-public.mastergo.com/ai/img_res/1b6c815bd8732f2e2987745576111169.jpg',
      'https://ai-public.mastergo.com/ai/img_res/b8e03ae99767491f95ccaaa96af0aeba.jpg'
    ];

// 添加组件引用
const lampMapRef = ref(null)

// 添加微信环境检测
const isWechat = ref(false)

// 检测是否在微信浏览器中
const checkWechatBrowser = () => {
  const ua = navigator.userAgent.toLowerCase()
  isWechat.value = ua.indexOf('micromessenger') !== -1
}



// 加载页面数据
const loadPageData = () => {
  listTempleHall().then(res => {
    templaHalls.value = res.data
  })
}

// 修改 onMounted
onMounted(async () => {
  await handleThirdOpenid()

  // 检查是否已经有用户信息
  if (userStore.userInfo && userStore.userInfo.openid) {
    if(!userStore.userInfo.thirdOpenid) {
      await getThirdOpenid()
    }
    loadPageData()
    return
  }

  // 检查 URL 中是否有 token
  const hasToken = await handleToken()
  if (hasToken) {
    loadPageData()
    return
  }
  //loadPageData()
  // 如果既没有用户信息也没有 token，则进行授权
  checkUserAndAuth()

})

// 添加对已选灯位区域的引用
const selectedLampsRef = ref(null)

 // 选择灯位
const handleLampSelect = async (lamp) => {
  console.log('handleLampSelect', lamp)
  if (lamp === null) {
    // 处理取消选择的情况
    selectedLamp.value = null
    // 清空相关选择
    selectedLampType.value = null
    selectedDuration.value = null
    lampTypes.value = []
    durations.value = []
    presetWishes.value = []
  } else {
    // 处理选择新灯的情况
    selectedLamp.value = lamp

    // 等待数据加载完成
    await Promise.all([
      listLampType({areaId: lamp.areaId}).then(res => {
        lampTypes.value = res.data
      }),
      listPriceUnit({areaId: lamp.areaId}).then(res => {
        durations.value = res.data
      })
    ])

    // 等待 DOM 更新完成后再滚动
    await nextTick()

    // 使用更可靠的滚动方法
    const element = selectedLampsRef.value
    if (element) {
      const offset = element.getBoundingClientRect().top + window.pageYOffset - 20
      window.scrollTo({
        top: offset,
        behavior: 'smooth'
      })
    }
  }
}

// 修改删除灯位的处理函数
const handleDeleteLamp = (lampId) => {
  if (lampMapRef.value && selectedLamp.value) {
    // 重置 3D 场景中的灯状态
    lampMapRef.value.resetSelection()
  }

  // 清空所有选择和状态
  selectedLamp.value = null
  selectedLampType.value = null
  selectedDuration.value = null
  lampTypes.value = []
  durations.value = []
  presetWishes.value = []
}

// 响应式数据
const selectedLampType = ref(null)
let selectedLampTypeName = ''
const selectedDuration = ref(null)

// 计算总金额
const totalAmount = computed(() => {
  if (!selectedDuration.value || !durations.value.length) return 0
  const duration = durations.value.find(d => d.id === selectedDuration.value)
  return duration ? duration.price : 0
})

// 检查是否可以确认
const canConfirm = computed(() => {
  return selectedLamp.value &&
         selectedLampType.value &&
         selectedDuration.value &&
         prayerName.value &&
         prayerMessage.value
})

// 选择灯类别
const selectLampType = (type) => {
  selectedLampType.value = type.id
  selectedLampTypeName = type.typeName

  listBlessingWords({typeId: type.id}).then(res => {
    presetWishes.value = res.data
  })
}

const changeTempleHall = (hall) => {
  // 如果有已选择的灯，先重置它的状态
  if (selectedLamp.value && lampMapRef.value) {
    // 重置 3D 场景中的灯状态
    lampMapRef.value.resetSelection()
  }

  // 更新大殿 ID
  selectedTemple.value = hall.id + ""
  selectedTemplName.value = hall.name
  // 清空所有选择和状态
  selectedLamp.value = null
  selectedLampType.value = null
  selectedDuration.value = null
  prayerName.value = ''
  prayerMessage.value = ''
  lampTypes.value = []
  durations.value = []
  presetWishes.value = []
}

// 选择预设祝愿语
const selectWish = (wish) => {
  prayerMessage.value = wish.blessWord
}

// 确认供灯
const handleConfirm = () => {
  let days = 0;
  for (let i = 0; i < durations.value.length; i++) {
    if (durations.value[i].id === selectedDuration.value) {
      days = durations.value[i].dayNum;
      break;
    }
  }

  let data = {
    bid:selectedTemple.value,
    lampId: selectedLamp.value.id,
    lampTypeId: selectedLampType.value,
    lampType: selectedLampTypeName,
    priceId: selectedDuration.value,
    prayerName: prayerName.value,
    prayerMessage: prayerMessage.value,
    amount: totalAmount.value,
    openid: userStore.userInfo.openid,
    rowNu: selectedLamp.value.row,
    columnNu: selectedLamp.value.column,
    areaId: selectedLamp.value.areaId,
    groupId: selectedLamp.value.groupId,
    categoryDetailId: selectedLamp.value.categoryDetailId,
    hall: selectedTemplName.value,
    days: days
  }

  // 调用后端接口获取支付参数
  genPayParams(data).then(res => {
    if (res.code === 200 && res.data) {
      const payParams = res.data;
      // 调用微信支付
      WeixinJSBridge.invoke('getBrandWCPayRequest', {
            "appId": payParams.appId, //公众号ID，由商户传入
            "timeStamp": payParams.timeStamp, // 支付签名时间戳
            "nonceStr": payParams.nonceStr, // 随机串
            "package": payParams.packageX, // 统一下单接口返回的prepay_id参数值
            "signType": payParams.signType, // 签名方式，默认为'SHA1'
            "paySign": payParams.paySign
          },
          function(res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              // 使用以上方式判断前端返回,微信团队郑重提示：
              //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠，商户需进一步调用后端查单确认支付结果。
              showSuccessToast('支付成功');
              // 清空选择状态
              resetSelection();
              // 可以跳转到订单页面或其他页面
              router.push('/blessing-records');
            }else {
              showFailToast(res.msg || '获取支付参数失败');
            }
          });
    }
  }).catch(error => {
    console.error('生成支付参数失败:', error);
    showFailToast('生成支付参数失败，请重试');
  });
}

// 添加重置选择的方法
const resetSelection = () => {
  if (lampMapRef.value) {
    lampMapRef.value.resetSelection();
  }
  selectedLamp.value = null;
  selectedLampType.value = null;
  selectedDuration.value = null;
  prayerName.value = '';
  prayerMessage.value = '';
  lampTypes.value = [];
  durations.value = [];
  presetWishes.value = [];
}
</script>

<style scoped>
.index-container {
  background-color: var(--primary-bg);
  min-height: 100vh;
  padding-bottom: 100px;
}

/* 修改导航栏样式 */
:deep(.van-nav-bar) {
  background: var(--gradient-primary);
}

:deep(.van-nav-bar__title) {
  color: #FFFFFF;
}

/* 修改大殿列表区域样式 */
:deep(.van-grid) {
  background-color: var(--primary-bg) !important;
  padding: 12px !important;
}

:deep(.van-grid-item__content) {
  background-color: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  height: auto !important; /* 确保高度自适应 */
}

/* 调整图片容器的样式 */
:deep(.van-grid-item__content .van-image) {
  margin-bottom: 12px !important;
}

.title {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: var(--text-primary);
  margin-top: 12px;
  padding: 0 8px; /* 添加文字左右内边距 */
}

/* 修改大殿选择区域的整体背景色 */
.temple-section {
  background-color: var(--primary-bg) !important;
  margin: 16px;
  border-radius: 16px;
  padding: 20px;
}

/* 修改 section-title 样式 */
.section-title {
  color: var(--text-primary);
    text-align: center;
  margin: 24px 0 16px;
  font-size: 32px !important;
  font-weight: bold;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--primary-color);
  margin: 8px auto;
  border-radius: 2px;
}

/* 修改灯位选择区域 */
.lamp-position-map {
  background: var(--secondary-bg);
  border-radius: 8px;
  margin: 4px;
  padding: 0px;
}

/* 修改已选灯位卡片 */
.selected-lamps-list {
  padding: 12px;
  margin: 12px 10px;
  background: #FFF9F0; /* 修改为暖色背景 */
  border-radius: 20px;
  width: calc(100% - 30px);
  scroll-margin-top: 20px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 添加轻微阴影 */
}

.lamp-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #FFFFFF; /* 修改为白色背景 */
  border-radius: 16px;
  border: 1px solid #DCC49A; /* 修改边框颜色 */
  position: relative;
  margin-top: 16px;
}

.lamp-image {
  flex-shrink: 0;
  margin-right: 20px;
}

.lamp-info {
  flex: 1;
  min-width: 0;
}

.lamp-title {
  font-size: 32px;
  color: var(--text-primary);
  font-weight: bold;
  margin-bottom: 8px;
}

.lamp-position {
  display: flex;
  flex-wrap: wrap;
}

:deep(.van-tag) {
  font-size: 24px;
  padding: 8px 16px;
  background: #DF5454;
  border: none;
  color: #FFFFFF;
}

.lamp-actions {
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.delete-icon {
  font-size: 32px;
  color: #DF5454; /* 修改为主题红色 */
  padding: 12px;
  background: rgba(223, 84, 84, 0.1); /* 修改背景色 */
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.delete-icon:hover {
  background: rgba(223, 84, 84, 0.2);
}

/* 修改灯类别选择 */
.lamp-type-item {
  background: var(--card-bg);
  border: 1px solid var(--border-color);

  &.active {
    background: var(--gradient-primary);
    color: #FFFFFF;
  }
}

/* 修改供灯时长选择 */
.duration-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 8px) !important; /* 修改宽度，减去左边距 */
  padding: 24px 32px !important;
  background: var(--primary-bg);
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  margin-left: 8px !important;
}

/* 选中状态的卡片样式 */
:deep(.van-radio__icon--checked) + .van-radio__label .duration-card {
  border-color: #DF5454 !important;
  background: rgba(223, 84, 84, 0.1) !important;
  width: calc(100% - 8px) !important; /* 确保选中状态下宽度一致 */
}

/* 调整单选框容器样式 */
:deep(.van-radio) {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 4px 0 !important;
  margin: 0 !important;
}

:deep(.van-radio__label) {
  flex: 1;
  margin-left: 16px !important;
  width: calc(100% - 52px) !important; /* 减去单选框的宽度和间距 */
  font-size: 28px !important;
  line-height: 40px !important;
}

/* 调整持续时间选项容器样式 */
.duration-options {
  padding: 15px;
  margin: 0 15px;
  width: calc(100% - 30px); /* 确保容器宽度正确 */
}

/* 修改表单样式 */
:deep(.van-field) {
  background: var(--card-bg);
}

/* 修改祝愿语标签 */
.wish-tag {
  background: var(--secondary-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;

  &:active {
    background: var(--primary-color) !important;
    color: #FFFFFF !important;
  }
}

/* 修改按钮样式 */
:deep(.van-button--primary) {
  background: var(--gradient-primary);
  border: none;
}

/* 修改价格显示 */
.price-value {
  color: var(--primary-color);
  }

.banner-image {
  width: calc(100% - 20px); /* 减去左右边距 */
  height: 300px;
  overflow: hidden;
  margin: 10px auto; /* 修改为auto实现水平居中 */
  border-radius: 20px;
}

.my-swipe {
  width: 100%;
  height: 100%;
}

.my-swipe .van-swipe-item {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #39a9ed;
}

.banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px; /* 保持图片圆角 */
}

.section {
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 20px;
  height: 200px;
}

.lamp-map-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

.selected-lamps-list {
  padding: 24px;
  margin: 20px 15px;
  border-radius: 20px;
  width: calc(100% - 30px);
  scroll-margin-top: 20px; /* 保持滚动边距 */
  position: relative; /* 添加定位上下文 */
}

.lamp-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.lamp-image {
  flex-shrink: 0;
  margin-right: 20px;
}

.lamp-info {
  flex: 1;
  min-width: 0; /* 防止文字溢出 */
}

.lamp-position {
  display: flex;
  flex-wrap: wrap;
}

:deep(.van-tag) {
  font-size: 24px;
  padding: 8px 16px;
  background: #DF5454;
  border: none;
}

:deep(.van-tag--plain) {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.lamp-actions {
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.delete-icon {
  font-size: 32px;
  color: #ee0a24;
  padding: 12px;
  background: rgba(238, 10, 36, 0.1);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.delete-icon:hover {
  background: rgba(238, 10, 36, 0.2);
}

/* 移除之前的 van-card 相关样式 */
:deep(.van-card) {
  display: none;
}

.setup-section {
  margin: 20px 15px;
  padding: 15px;
  padding-bottom: 160px; /* 增加底部padding */
  border-radius: 12px;
  background: var(--card-bg);
}

.lamp-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 15px;
}

.lamp-type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: var(--primary-bg);
  cursor: pointer;
  transition: all 0.3s ease;
}

.lamp-type-item.active {
  background: var(--van-primary-color);
}

.lamp-type-item p {
  margin-top: 8px;
  font-size: 24px;
  color: var(--text-color);
}

.duration-options {
  padding: 15px;
  margin: 0 15px;
}

.duration-radio {
  margin-bottom: 15px;
  width: 100%;
}

/* 修改单选按钮相关样式 */
:deep(.van-radio) {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 4px 0 !important;
}

:deep(.van-radio__icon) {
  flex-shrink: 0;
  margin-top: 0;
  height: 36px !important;
  width: 36px !important;
  font-size: 36px !important;
}

:deep(.van-radio__icon .van-icon) {
  height: 36px !important;
  width: 36px !important;
  font-size: 36px !important;
  line-height: 36px !important;
}

:deep(.van-radio__label) {
  flex: 1;
  margin-left: 16px !important;
  width: 100%;
  font-size: 28px !important;
  line-height: 40px !important;
}

/* 选中状态的样式 */
:deep(.van-radio__icon--checked) {
  color: #DF5454 !important;
  font-size: 36px !important;
  border-color: #DF5454 !important;
}

/* 调整单选框外圈大小 */
:deep(.van-radio__icon .van-icon-success) {
  border: 2px solid #999 !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
}

/* 选中状态的边框颜色 */
:deep(.van-radio__icon--checked .van-icon-success) {
  border-color: #DF5454 !important;
  background-color: #DF5454 !important;
}

/* 调整持续时间卡片样式 */
.duration-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 24px 32px !important;
  background: var(--primary-bg);
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  margin-left: 8px !important;
}

/* 选中状态的卡片样式 */
:deep(.van-radio__icon--checked) + .van-radio__label .duration-card {
  border-color: #DF5454 !important;
  background: rgba(223, 84, 84, 0.1) !important;
}

.duration-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.duration-name {
  font-size: 24px;
  color: var(--text-color);
}

.duration-days {
  font-size: 24px;
  color: var(--van-gray-6);
}

.duration-price {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 16px;
  color: #DF5454;
  margin-right: 2px;
}

.price-value {
  font-size: 24px;
  font-weight: bold;
  color: #DF5454;
}

/* 添加点击状态的样式 */
.duration-radio:active .duration-card {
  opacity: 0.8;
}

.total-amount {
  text-align: right;
  padding: 15px;
  font-size: 24px;
}

.amount {
  color: var(--van-danger-color);
  font-size: 24px;
  font-weight: bold;
}

.blessing-input {
  padding: 24px 16px !important; /* 减小左右内边距 */
}

:deep(.van-field) {
  margin-bottom: 16px !important; /* 减少表单项之间的间距 */
  width: 100% !important; /* 确保宽度为100% */
}

:deep(.van-cell) {
  padding: 12px !important; /* 减少内边距 */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 调整标签和输入框的布局 */
:deep(.van-field__label) {
  font-size: 28px !important;
  line-height: 40px !important;
  width: 100px !important; /* 减小标签宽度 */
  flex: none !important;
}

:deep(.van-field__value) {
  flex: 1 !important;
  min-width: 0 !important; /* 防止内容溢出 */
}

/* 确保输入框容器不被挤压 */
:deep(.van-cell__value) {
  flex: 1 !important;
  min-width: 0 !important;
}

/* 预设祝愿语区域调整 */
.preset-wishes {
  margin-top: 12px !important; /* 减少与上方输入框的距离 */
  padding: 0 !important; /* 移除内边距 */
}

.wish-tag {
  cursor: pointer;
}

:deep(.wish-tag.van-tag) {
  padding: 4px 8px;
  font-size: 20px;
  border-radius: 20px;

}

/* 如果 LampPositionMap3D 组件需要特定宽度，可以添加以下样式 */
:deep(.lamp-position-map-3d) {
  max-width: 600px; /* 或其他合适的宽度 */
  width: 100%;
  margin: 0 auto;
}

/* 添加微信提示样式 */
.wechat-tip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f8fa;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.wechat-tip :deep(.van-empty) {
  padding: 32px 0;
}

.wechat-tip :deep(.van-empty__description) {
  color: #666;
  font-size: 28px;
  margin-top: 20px;
}

/* 加强表单字体大小控制 */
:deep(.van-field__label) {
  font-size: 28px !important;
  line-height: 40px !important;
}

:deep(.van-field__control) {
  font-size: 24px !important; /* 稍微减小字体大小 */
  line-height: 36px !important;
  width: 100% !important;
}

:deep(.van-cell) {
  padding: 12px !important; /* 减少内边距 */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 加强按钮样式控制 */
:deep(.van-button) {
  height: 88px !important;
  line-height: 88px !important;
  font-size: 28px !important;
}

/* 加强单选框样式 */
:deep(.van-radio__label) {
  font-size: 28px !important;
  line-height: 40px !important;
}

.duration-name {
  font-size: 28px !important;
  line-height: 40px !important;
}

.duration-days {
  font-size: 28px !important;
  line-height: 40px !important;
}

.duration-card {
  padding: 24px 32px !important;
}

/* 加强总金额显示 */
.total-amount {
  font-size: 28px !important;
  line-height: 40px !important;
}

.amount {
  font-size: 32px !important;
  line-height: 44px !important;
}

/* 加强祝福语标签样式 */
:deep(.wish-tag.van-tag) {
  font-size: 24px !important;
  padding: 8px 16px !important;
  line-height: 32px !important;
}

/* 确保输入框内的文字大小 */
:deep(.van-field__word-limit) {
  font-size: 24px !important;
}

/* 加强卡片样式 */
:deep(.van-card__title) {
  font-size: 28px !important;
  line-height: 40px !important;
}

:deep(.van-card__desc) {
  font-size: 24px !important;
  line-height: 36px !important;
}

:deep(.van-tag) {
  font-size: 24px !important;
  padding: 8px 16px !important;
}

/* 确保标题字体大小 */
.section-title {
  font-size: 32px !important;
  line-height: 44px !important;
  margin: 24px 0 !important;
}

/* 灯类别文字 */
.lamp-type-item p {
  font-size: 28px !important;
  line-height: 40px !important;
  margin-top: 12px !important;
}

/* 调整表单间距 */
.blessing-input {
  padding: 24px !important;
}

:deep(.van-field) {
  margin-bottom: 24px !important;
}

/* 调整确认按钮区域 */
.confirm-section {
  padding: 24px 32px !important;
  margin-top: 32px !important;
}

/* 确保弹出层中的文字大小 */
:deep(.van-popup) {
  font-size: 28px !important;
}

/* 调整删除图标大小和位置 */
:deep(.delete-icon) {
  font-size: 32px !important;
  padding: 12px !important;
}

/* 修改 tabbar 背景颜色 */
:deep(.van-tabbar) {
  background-color: #FFF9F0 !important;
}

/* 确保底部安全区域也使用相同的背景色 */
:deep(.van-tabbar--fixed) {
  background-color: #FFF9F0 !important;
}

/* 修改 tabbar 项的背景色 */
:deep(.van-tabbar-item) {
  background-color: #FFF9F0 !important; /* 设置所有选项的背景色 */
}

:deep(.van-tabbar-item--active) {
  background-color: #FFF9F0 !important; /* 确保激活状态的背景色一致 */
}

/* 确保整个 tabbar 区域背景色一致 */
:deep(.van-tabbar) {
  background-color: #FFF9F0 !important;
}

:deep(.van-tabbar--fixed) {
  background-color: #FFF9F0 !important;
}
</style>
